<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket连接指南</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.5;
        }
        h1, h2, h3 {
            color: #333;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
        .note {
            background-color: #fff8dc;
            border-left: 4px solid #ffd700;
            padding: 10px;
            margin: 15px 0;
        }
        .error {
            background-color: #ffeeee;
            border-left: 4px solid #ff6666;
            padding: 10px;
            margin: 15px 0;
        }
        .success {
            background-color: #f0fff0;
            border-left: 4px solid #66cc66;
            padding: 10px;
            margin: 15px 0;
        }
        img {
            max-width: 100%;
            border: 1px solid #ddd;
            margin: 10px 0;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 15px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>WebSocket连接指南</h1>
    
    <div class="note">
        <strong>注意：</strong> 本指南专门解决在Apifox和浏览器中连接WebSocket的常见问题。
    </div>
    
    <h2>可用的WebSocket端点</h2>
    
    <table>
        <tr>
            <th>端点</th>
            <th>描述</th>
            <th>推荐用途</th>
        </tr>
        <tr>
            <td><code>/wsraw</code></td>
            <td>原生JSON WebSocket API</td>
            <td>主要API，用于AI聊天系统</td>
        </tr>
        <tr>
            <td><code>/echo</code></td>
            <td>简单Echo服务器</td>
            <td>测试WebSocket连接是否正常工作</td>
        </tr>
        <tr>
            <td><code>/ws</code></td>
            <td>STOMP协议WebSocket</td>
            <td>适用于需要使用STOMP协议的情况</td>
        </tr>
    </table>
    
    <h2>常见问题与解决方案</h2>
    
    <h3>1. 无法连接到WebSocket</h3>
    
    <div class="error">
        <strong>问题：</strong> 尝试连接WebSocket时出现错误，例如"无法连接"或"连接被关闭(代码1006)"。
    </div>
    
    <p><strong>可能的原因：</strong></p>
    <ul>
        <li>浏览器同源策略限制</li>
        <li>URL格式不正确</li>
        <li>后台服务未正确运行</li>
        <li>网络问题或防火墙阻止</li>
    </ul>
    
    <p><strong>解决方案：</strong></p>
    <ol>
        <li>确保URL格式正确：使用 <code>ws://localhost:8080/echo</code> 而非 <code>http://localhost:8080/echo</code></li>
        <li>使用我们的<a href="/minimal-test.html">最小测试页面</a>或<a href="/echo-test.html">Echo测试页面</a>来验证连接</li>
        <li>确认后台服务正在运行</li>
        <li>检查浏览器控制台是否有错误信息</li>
    </ol>
    
    <h3>2. 在Apifox中测试</h3>
    
    <p>Apifox是一个API测试工具，可以用来测试WebSocket连接。</p>
    
    <p><strong>Echo测试：</strong></p>
    <ol>
        <li>在Apifox中创建一个WebSocket请求</li>
        <li>URL填写: <code>ws://localhost:8080/echo</code></li>
        <li>点击"连接"</li>
        <li>连接成功后，在消息框中输入任意文本并发送</li>
        <li>您应该会收到一个以"Echo: "开头的回复</li>
    </ol>
    
    <p><strong>RawWS测试：</strong></p>
    <ol>
        <li>在Apifox中创建一个WebSocket请求</li>
        <li>URL填写: <code>ws://localhost:8080/wsraw</code></li>
        <li>点击"连接"</li>
        <li>连接成功后，发送以下JSON测试消息:</li>
    </ol>
    
<pre>{
  "action": "test",
  "customerId": "cs001",
  "timestamp": 1623456789000
}</pre>
    
    <p>您应该收到一个类似下面的响应:</p>
    
<pre>{
  "type": "TEST_RESPONSE",
  "message": "这是一个测试响应",
  "timestamp": 1623456789123
}</pre>
    
    <div class="success">
        <strong>提示：</strong> 如果Echo测试成功但RawWS测试失败，说明WebSocket连接本身是正常的，可能是消息格式有问题。
    </div>
    
    <h3>3. 创建会话测试</h3>
    
    <p>要创建一个AI聊天会话，发送以下JSON:</p>
    
<pre>{
  "action": "createSession",
  "customerId": "cs001",
  "modelServiceName": "doubaoService"
}</pre>
    
    <p>您应该收到一个包含会话ID和首次机器人消息的响应。</p>
    
    <h2>测试工具</h2>
    
    <p>我们提供了几个测试页面来帮助验证WebSocket连接:</p>
    <ul>
        <li><a href="/minimal-test.html">最小测试页面</a> - 极简设计，快速测试连接</li>
        <li><a href="/echo-test.html">Echo测试页面</a> - 测试Echo服务器</li>
        <li><a href="/websocket-raw.html">完整WebSocket客户端</a> - 完整功能的AI聊天客户端</li>
        <li><a href="/direct-ws-test.html">直接WebSocket测试</a> - 另一个测试工具</li>
    </ul>
    
    <h2>技术说明</h2>
    
    <div class="note">
        <p>本系统使用了Spring Boot的WebSocket支持，提供了两种连接方式:</p>
        <ol>
            <li><strong>原生WebSocket(推荐):</strong> 直接使用JSON格式通信，更简单易用</li>
            <li><strong>STOMP协议:</strong> 更复杂但功能更丰富的通信协议</li>
        </ol>
    </div>
    
    <p>建议使用原生WebSocket(<code>/wsraw</code>或<code>/echo</code>)进行连接，这样更简单且不容易出错。</p>
</body>
</html> 